<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        ul,ul li{list-style: none;}
        .slide{width:800px;height: 450px;overflow: hidden;margin: 0 auto;position: relative}
        .slide ul{position: relative;top: 0px;left: 0px;}
        .slide ul li{line-height: 0;float: left;position:relative;}
        .slide ul li{display:none;position: absolute;top: 50%;width: 100%;text-align: center;color: white;font-weight: bold;font-size: 32px}
        .slide .control{position: absolute;bottom: 20px;left: 0px;width: 100%;text-align: center}
        .slide .control span{width: 15px;height: 15px;background: red;display: inline-block;border-radius: 100%;opacity: 0.4;cursor: pointer}

    </style>
</head>
<body>
<div class="slide">
    <ul>
        <li>
            <img src="1.jpg">
        </li>
        <li>
            <img src="2.jpg">
        </li>
        <li>
            <img src="3.jpg">
        </li>
    </ul>
    <div class="control">
        <span></span>&nbsp;
        <span></span>&nbsp;
        <span></span>
    </div>
</div>
<script src="jquery-3.2.0.min.js"></script>
<script>
    var len=$('.slide>ul>li').length;
    var itemW=$('.slide>ul>li:first').width();
    var itemH=$('.slide>ul>li:first').height();
    $('.slide>ul').css('width',itemW*len+'px');
    $('.slide>ul').css('height',itemH+'px');



    //点击圆点滚动
    $('.slide .control span').mouseover(function(){
        var index=$(this).index();
        $('.slide>ul').css('left',-index*itemW+'px');
        $('.slide>ul>li .desc').removeClass('animated').hide();
        setTimeout(function(){
            //$('.slide>ul>li:eq('+index+') .desc').show().addClass('animated');
            $('.slide>ul>li').eq(index).find('.desc').show().addClass('animated');
        },300);
        $(this).css('opacity',1).siblings().css('opacity',0.6);
    })
</script>
</body>
</html>
